<template>
  <el-space v-if="names && names.length > 0">
    <span v-for="i in names" :key="i">{{ i }}</span>
  </el-space>
</template>

<script setup lang="ts">
import { GetDicTextList } from '@/api/base/dictItem'
import { propTypes } from '@/utils/propTypes'
import { ref, watch } from 'vue'

const props = defineProps({
  dicId: propTypes.string,
  values: propTypes.any
})
const names = ref<string[]>([])

const reset = (val) => {
  if (val == null || val.length === 0) {
    names.value = []
    return
  }
  if (!Array.isArray(val)) {
    val = [val]
  }
  loadItemText(val)
}
const loadItemText = async (ids) => {
  names.value = await GetDicTextList(props.dicId, ids)
}
watch(
  () => props.dicId,
  (dic: string) => {
    if (dic) {
      reset(props.values)
    }
  },
  {
    immediate: false
  }
)
watch(
  () => props.values,
  (val) => {
    if (props.dicId) {
      reset(val)
    }
  },
  {
    immediate: true
  }
)
</script>
